const path = require('path');
const webpack = require('webpack');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

const devMode = process.env.NODE_ENV === 'development';
module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {test: /\.vue$/, use: 'vue-loader'},
      {test: /\.css$/, use: [
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: {
              // sourceMap:true
            }
          }]}
    ]
  },
  plugins: [
      new webpack.DefinePlugin({
        // 注入process.env.NODE_ENV变量 到 main.js
        "process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV)
      }),
      new VueLoaderPlugin(),
      new MiniCssExtractPlugin({
        filename: devMode ? '[name].css' : '[name].[hash].css',
        // chunkFilename 用于按需加载的文件0.asdw2ewe3348.css
        chunkFilename: devMode ? '[id].css' : '[id].[hash].css'
      })
  ],
  devServer: {
    // 做web服务器
    // await (await fetch('/test/get')).json()
    before(app) {
      app.get('/test/get', function(req, res){
        res.json({ get: 'response get' })
      });
      // await (await fetch('/test/post',{method:'post'})).json()
      app.post('/test/post', function(req, res) {
        res.json({ post: 'response post' })
      })
    }
  }
};
